import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useState } from 'react';
import ModalDetail from '../ParkingOrder/Detail/ModalDetail';
import { queryRefundRecords } from './service';
import type { RefundRecordItem } from './types.d';

const RefundRecord = () => {
  const [currOrderNo, setCurrOrderNo] = useState<string>('');
  const [orderDetailVisible, setOrderDetailVisible] = useState<boolean>(false);
  const columns: ProColumns<RefundRecordItem>[] = [
    {
      title: '退款编号',
      tooltip: '收费平台方本次退款编号',
      dataIndex: 'refundNo',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '车牌号码',
      dataIndex: 'plateNumber',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      align: 'center',
      hideInForm: true,
      render: (_, record) => (
        <a
          key={record.refundNo + '_modal'}
          onClick={() => {
            setCurrOrderNo(record.orderNo);
            setOrderDetailVisible(true);
          }}
        >
          {record.orderNo}
        </a>
      ),
    },
    {
      title: '支付编号',
      dataIndex: 'payOrderNo',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '退款金额',
      dataIndex: 'amount',
      hideInSearch: true,
      align: 'center',
      valueType: 'money',
      renderText: (text) => (text / 100).toFixed(2),
    },
    {
      title: '退款状态',
      dataIndex: 'status',
      align: 'center',
      valueEnum: {
        0: { text: '成功', status: 'success' },
        1: { text: '处理中', status: 'processing' },
        2: { text: '失败', status: 'error' },
      },
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      align: 'center',
      valueType: 'dateTime',
    },
    {
      title: '退款时间',
      dataIndex: 'refundTime',
      hideInSearch: true,
      align: 'center',
      valueType: 'dateTime',
    },
    {
      title: '处理人员',
      dataIndex: 'operUser',
      align: 'center',
      hideInForm: true,
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '退款记录',
        breadcrumb: {
          routes: [
            { path: '/', breadcrumbName: '首页' },
            { path: '/order', breadcrumbName: '订单管理' },
            { path: '/order/refund-records', breadcrumbName: '退款记录' },
          ],
        },
      }}
    >
      <ProTable<RefundRecordItem>
        columns={columns}
        rowKey="refundNo"
        scroll={{ x: true }}
        style={{ whiteSpace: 'nowrap' }}
        columnEmptyText="暂无数据"
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={async (param, sort) => {
          const res = await queryRefundRecords(param, sort);
          return res;
        }}
      />
      {orderDetailVisible && (
        <ModalDetail
          orderNo={currOrderNo}
          visible={orderDetailVisible}
          close={() => {
            setOrderDetailVisible(false);
            setCurrOrderNo('');
          }}
        />
      )}
    </PageHeaderWrapper>
  );
};

export default RefundRecord;
